<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile" renderKitId="PRIMEFACES_MOBILE">

	<pm:page title="MapEvent2.0">

		<f:facet name="postinit">
                    
			<h:outputScript library="primefaces" name="gmap/gmap.js" />
			<script type="text/javascript"
				src="http://maps.google.com/maps/api/js?sensor=true" />
		</f:facet>


            <pm:header  swatch="a" />
		<pm:content>
			<h:form>
                            <p:commandButton value="MapEvent2.0" style="width:100%"/>
				<p:gmap id="gmap" center="3.436658158559092,-76.52252197265625"
					zoom="13" type="HYBRID" style="width:100%;height:30em"
					model="#{eventosView.emptyModel}"
					onPointClick="handlePointClick(event);" widgetVar="map">
					<p:ajax event="overlaySelect"
						listener="#{eventosView.onMarkerSelect}" />
                                        <p:gmapInfoWindow rendered="true" >
						<p:outputPanel
                                                    style="text-align:center;display:block;margin:auto;height:400px;" rendered="true" >

							<p:galleria id="galeria" value="#{eventosView.fotos}" var="image"
								style="text-align:center;display:block;margin:auto;"
                                                                 panelWidth="200" panelHeight="150">
								<p:graphicImage value="/#{image.id}.jpg" cache="false"
									title="#{image.nombre}" width="240" height="150">
								</p:graphicImage>
							</p:galleria>

							<p:panelGrid columns="2" style="margin: 0 auto;">
								<h:outputLabel value="Nombre evento:" />
								<h:outputText value="#{eventosView.nombre}" />

								<h:outputLabel value="Fecha:" />
								<h:outputText value="#{eventosView.fecha2}" />

								<h:outputLabel value="Hora:" />
								<h:outputText value="#{eventosView.hora2}" />

								<h:outputLabel value="Dirección" />
								<h:outputText value="#{eventosView.direccion}" />

								<h:outputLabel value="Tipo Evento" />
								<h:outputText value="#{eventosView.tipoEvento}" />
							</p:panelGrid>

						</p:outputPanel>
					</p:gmapInfoWindow>
				</p:gmap>
			</h:form>
		</pm:content>
	</pm:page>
</f:view>